<template>
    <div class="step-qqt">
        <el-row type="flex" align="middle">
            <el-col :span="18">
                <div class="qqt-title">
                    <span class="label">请求头参数</span>
                    <el-button type="text" icon="Plus" @click="handleAdd('qqtIn')"/>
                </div>
            </el-col>
            <el-col :span="6" v-if="serverReleaseType === '3'">
                <div class="flex-end">
                    <el-checkbox v-model="qqtData.isHeaderInChange" :disabled="isView">
                        <el-button type="text">结构转换</el-button>
                    </el-checkbox>
                    <el-button style="margin-left: 5px;cursor: pointer"
                               type="text" v-if="qqtData.isHeaderInChange"
                               @click="handleChange('inChange')"
                    >配置
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="reqHeaderList" style="margin: 10px 0">
            <el-table-column label="参数名" prop="nodeName" width="150"/>
            <el-table-column
                    label="参数描述"
                    prop="nodeLabel"
                    :show-overflow-tooltip="true"
                    min-width="150"
            />
            <el-table-column label="参数类型" prop="nodeType" width="150">
                <template #default="scope">
                    <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否必须" prop="nodeNeededable">
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeNeededable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column label="是否必填" prop="nodeValueable">
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeValueable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column
                    label="校验规则"
                    prop="nodeCheckRegex"
                    :show-overflow-tooltip="true"
                    min-width="200"
            />
            <el-table-column label="操作" width="220" v-if="!isView">
                <template #default="scope">
                    <text-edit-button @click="handleEdit(scope.row, 'qqtIn')"/>
                    <text-delete-button
                            :title="'是否确认删除' + scope.row.nodeName + '?'"
                            @click="handleDelete(scope.row, 'qqtIn')"
                    />
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" align="middle" v-if="showRes">
            <el-col :span="18">
                <div class="qqt-title">
                    <span class="label">响应头参数</span>
                    <i
                            v-if="!isView"
                            class="el-icon-plus text-success add"
                            @click="handleAdd('qqtOut')"
                    ></i>
                </div>
            </el-col>
            <el-col :span="6" v-if="serverReleaseType === '3'">
                <div class="flex-end">
                    <el-checkbox v-model="qqtData.isHeaderOutChange" :disabled="isView">
                        <el-button type="text">结构转换</el-button>
                    </el-checkbox>
                    <el-button style="margin-left: 5px;cursor: pointer"
                               type="text" v-if="qqtData.isHeaderOutChange"
                               @click="handleChange('outChange')">配置
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="resHeaderList" style="margin: 10px 0" v-if="showRes">
            <el-table-column label="参数名" prop="nodeName" width="150"/>
            <el-table-column
                    label="参数描述"
                    prop="nodeLabel"
                    :show-overflow-tooltip="true"
                    min-width="200"
            />
            <el-table-column label="参数类型" prop="nodeType" width="150">
                <template #default="scope">
                    <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否必须" prop="nodeNeededable">
                <template #default="scope">
                    <yes-no-tag
                            yesText="是"
                            noText="否"
                            :value="scope.row.nodeNeededable || ''"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220" v-if="!isView">
                <template #default="scope">
                    <text-edit-button @click="handleEdit(scope.row, 'qqtOut')"/>
                    <text-delete-button
                            :title="'是否确认删除' + scope.row.nodeName + '?'"
                            @click="handleDelete(scope.row, 'qqtOut')"
                    />
                </template>
            </el-table-column>
        </el-table>

        <add-params
                ref="addParamsRef"
                :title="title"
                :modelType="modelType"
                v-model:visible="visible"
                :nodeTypeList="nodeTypeList"
                :rules="rules"
                :initData="initData"
                @onOk="onOk"
        />
        <el-dialog
                v-el-drag-dialog
                :title="changeTitle"
                :close-on-click-modal="false"
                v-model:changeVisible="changeVisible"
                width="1200px"
                append-to-body
        >
            <template v-if="changeType === 'inChange'">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-card shadow="never" :body-style="{ padding: '0' }">
                            <div slot="header">
                                <!--                <span>能力请求头参数</span>-->
                                <el-tooltip class="item" effect="dark" content="能力请求参数来源于能力【请求头】"
                                            placement="right">
                  <span>
                   <span>
                     能力请求头参数
                   </span>
                    <i style="margin-left: 3px" class="el-icon-question"></i>
                  </span>
                                </el-tooltip>
                            </div>
                            <el-table :data="reqHeaderList">
                                <el-table-column label="参数名" prop="nodeName"/>
                                <el-table-column label="参数描述" prop="nodeLabel"/>
                                <el-table-column label="参数类型" prop="nodeType">
                                    <template #default="scope">
                    <span>{{
                        selectDictLabel(keyTypeList, scope.row.nodeType)
                        }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="never" :body-style="{ padding: '0' }">
                            <div slot="header">
                                <!--                <span>API请求头参数</span>-->
                                <el-tooltip class="item" effect="dark"
                                            content="API【请求头】参数来源于【API配置】页面的API【清求头】配置"
                                            placement="right">
                  <span>
                   <span>API请求头参数</span>
                    <i style="margin-left: 3px" class="el-icon-question"></i>
                  </span>
                                </el-tooltip>
                            </div>
                            <el-table :data="apiInChangeTable">
                                <el-table-column label="参数名" prop="nodeName"/>
                                <el-table-column label="参数描述" prop="nodeLabel"/>
                                <el-table-column label="JsonPath">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.jsonPath" size="mini"/>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </template>
            <template v-if="changeType === 'outChange'">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-card shadow="never" :body-style="{ padding: '0' }">
                            <div slot="header">
                                <span>API响应头参数</span>
                            </div>
                            <el-table :data="apiOutTable">
                                <el-table-column label="参数名" prop="nodeName"/>
                                <el-table-column label="参数描述" prop="nodeLabel"/>
                                <el-table-column label="参数类型" prop="nodeType">
                                    <template #default="scope">
                    <span>{{
                        selectDictLabel(keyTypeList, scope.row.nodeType)
                        }}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card shadow="never" :body-style="{ padding: '0' }">
                            <div slot="header">
                                <span>能力响应头参数</span>
                            </div>
                            <el-table :data="serviceOutChangeTable">
                                <el-table-column label="参数名" prop="nodeName"/>
                                <el-table-column label="参数描述" prop="nodeLabel"/>
                                <el-table-column label="JsonPath">
                                    <template #default="scope">
                                        <el-input
                                                v-model="scope.row.jsonPath"
                                                size="mini"
                                                :disabled="isView"
                                        />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </template>
            <dialog-footer
                    slot="footer"
                    okText="保存"
                    :showOk="!isView"
                    @ok="onChangeOk"
                    @cancel="changeVisible = false"
            />
        </el-dialog>
    </div>
</template>

<script>
// import {mapActions, mapState} from "vuex";

import {serviceStore} from '@slc/store/service';
import {mapActions, mapState} from 'pinia';

import {resHeaderSearch} from "@slc/api/slc/api";
import {
    reqInParamInsert,
    resOutParamInsert,
    reqInUpdateById,
    resOutUpdateById,
    reqInDeleteByIds,
    resOutDeleteByIds,
    saveChangeHeaderIn,
    saveChangeHeaderOut,
    searchChangeHeaderIn,
    searchChangeHeaderOut,
} from "@slc/api/slc/inventory";
import AddParams from "./add-params.vue";

export default {
    name: "step-qqt",
    components: {AddParams},
    props: {
        showRes: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            nodeTypeList: [
                {dictValue: "string", dictLabel: "字符串 (String)"},
                {dictValue: "long", dictLabel: "整数 (Long)"},
                {dictValue: "decimal", dictLabel: "小数 (Decimal)"},
            ],
            rules: {
                nodeType: [
                    {required: true, message: "参数类型不可以为空", trigger: "blur"},
                ],
                nodeName: [
                    {required: true, message: "参数名不可以为空", trigger: "blur"},
                ],
                nodeLabel: [
                    {required: true, message: "参数描述不可以为空", trigger: "blur"},
                ],
                // nodeCheckRegex: [
                //   { required: true, message: "校验规则不可以为空", trigger: "blur" },
                // ],
            },
            initData: {},
            modelType: "",
            title: "",
            type: "add",
            visible: false,
            changeTitle: "",
            changeType: "",
            changeVisible: false,
            apiInChangeTable: [],
            apiOutTable: [],
            serviceOutChangeTable: [],
        };
    },
    watch: {
        'qqtData.isHeaderInChange'(val) {
            if (val) {
                this.handleChange('inChange')
            }
        },
        'qqtData.isHeaderOutChange'(val) {
            if (val) {
                this.handleChange('outChange');
            }
        },
        qqtData: {
            handler(val) {
                this.setQqtInfo(val);
            },
            deep: true,
        },
    },
    computed: {
        ...mapState(serviceStore, [
            "serverReleaseType",
            "keyTypeList",
            "reqHeaderList",
            "resHeaderList",
            "serviceVerId",
            "chooseApiInfo",
            "dialogStatus",
            "dialogVersionStatus",
            "qqtInfo"
        ]),
        qqtData: {
            get() {
                return this.qqtInfo;
            }
            // set(val) {
            //   this.setQqtInfo(val);
            // },
        },
        isView() {
            // console.log(this.dialogStatus === "view" || this.dialogVersionStatus === "view")
            return (
                this.dialogStatus === "view" || this.dialogVersionStatus === "view"
            );
        },
    },
    mounted() {
        this.getReqHeaderData({serviceVerId: this.serviceVerId})
        this.getResHeaderData({serviceVerId: this.serviceVerId})
    },
    activated() {
        this.getReqHeaderData({serviceVerId: this.serviceVerId})
        this.getResHeaderData({serviceVerId: this.serviceVerId})
    },
    methods: {
        ...mapActions(serviceStore, ["setQqtInfo", "getReqHeaderData", "getResHeaderData"]),
        handleAdd(key) {
            this.type = "add";
            this.$refs["addParamsRef"].onReset();
            switch (key) {
                case "qqtIn":
                    this.title = "新增请求头参数";
                    break;
                case "qqtOut":
                    this.title = "新增响应头参数";
                    break;
                default:
                    break;
            }
            this.initData = {
                nodeType: "",
                nodeName: "",
                nodeLabel: "",
                nodeCheckRegex: "",
                nodeValueable: true,
                nodeNeededable: true,
            };
            this.modelType = key;
            this.visible = true;
        },
        handleEdit(row, key) {
            this.type = "edit";
            this.initData = {
                headerId: row.headerId,
                nodeType: row.nodeType,
                nodeName: row.nodeName,
                nodeLabel: row.nodeLabel,
                nodeCheckRegex: row.nodeCheckRegex,
                nodeValueable: row.nodeValueable === "Y",
                nodeNeededable: row.nodeNeededable === "Y",
            };
            switch (key) {
                case "qqtIn":
                    this.title = "修改请求头参数";
                    break;
                case "qqtOut":
                    this.title = "修改响应头参数";
                    break;
                default:
                    break;
            }
            this.modelType = key;
            this.visible = true;
        },
        async handleDelete(row, key) {
            this.type = "delete";
            let fn;
            key === "qqtIn" ? (fn = reqInDeleteByIds) : (fn = resOutDeleteByIds);
            const res = await fn(row.headerId);
            if (res.code === "200") {
                this.msgSuccess("删除成功");
                if (key === "qqtIn") {
                    this.getReqHeaderData({serviceVerId: this.serviceVerId});
                } else if (key === "qqtOut") {
                    this.getResHeaderData({serviceVerId: this.serviceVerId});
                }
            }
        },
        async onOk(formData) {
            const params = {
                serviceVerId: this.serviceVerId,
                ...formData,
                nodeNeededable: formData.nodeNeededable ? "Y" : "N",
                nodeValueable: formData.nodeValueable ? "Y" : "N",
                nodeCheckRegex:
                    formData.nodeType === "string" || formData.elementType === "string"
                        ? formData.nodeCheckRegex
                        : "",
            };
            let fn;
            if (this.type === "add") {
                fn = this.modelType === "qqtIn" ? reqInParamInsert : resOutParamInsert;
            } else if (this.type === "edit") {
                fn = this.modelType === "qqtIn" ? reqInUpdateById : resOutUpdateById;
            }
            const res = await fn(params);
            if (res.code === "200") {
                this.visible = false;
                this.msgSuccess(this.type === "add" ? "新增成功" : "修改成功");
                if (this.modelType === "qqtIn") {
                    this.getReqHeaderData({serviceVerId: this.serviceVerId});
                } else if (this.modelType === "qqtOut") {
                    this.getResHeaderData({serviceVerId: this.serviceVerId});
                }
            }
        },
        async handleChange(type) {
            console.log(type);
            this.changeType = type;
            const {apiId, apiVerId} = this.chooseApiInfo;
            if (type === "inChange") {
                const res = await searchChangeHeaderIn({
                    apiVerId,
                    serviceVerId: this.serviceVerId,
                });
                if (res.code === "200") {
                    this.apiInChangeTable = res.data;
                    this.changeTitle = "请求头转换结构";
                    this.changeVisible = true;
                }
            } else if (type === "outChange") {
                const apiRes = await resHeaderSearch({apiId, apiVerId});
                const res = await searchChangeHeaderOut({
                    apiVerId,
                    serviceVerId: this.serviceVerId,
                });
                if (res.code === "200") {
                    this.apiOutTable = apiRes.data;
                    this.serviceOutChangeTable = res.data;
                    this.changeTitle = "响应头转换结构";
                    this.changeVisible = true;
                }
            }
        },
        async onChangeOk() {
            let fn, params;
            switch (this.changeType) {
                case "inChange":
                    fn = saveChangeHeaderIn;
                    params = {
                        apiVerId: this.chooseApiInfo.apiVerId,
                        serviceVerId: this.serviceVerId,
                        headerIn: this.apiInChangeTable,
                    };
                    break;
                case "outChange":
                    fn = saveChangeHeaderOut;
                    params = {
                        apiVerId: this.chooseApiInfo.apiVerId,
                        serviceVerId: this.serviceVerId,
                        headerOut: this.serviceOutChangeTable,
                    };
                    break;
                default:
                    break;
            }
            const res = await fn(params);
            if (res.code === "200") {
                this.$message.success("结构转换保存成功。");
                this.changeVisible = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.step-qqt {
  padding: 0 24px;

  .qqt-title {
    display: flex;
    align-items: center;
    gap: 8px;

    .label {
      font-size: 18px;
    }

    .add {
      cursor: pointer;
      font-size: 24px;
      font-weight: 700;
    }
  }

  .flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
